<template>
  <div>
    <myheader></myheader>
    <div class="banner">
      <swiper :options="swiperOption" ref="mySwiper" style="width:80%;height:auto;max-height:430px;margin:0 auto;">
        <!-- slides -->
        <swiper-slide style="width: 1536px; margin-right: 30px;"><img src="http://resource.teemor.xyz/97b2147f-567d-4052-bd91-204561f8a728.jpg" /></swiper-slide>
        <swiper-slide style="width: 1536px; margin-right: 30px;"><img src="http://resource.teemor.xyz/f5e7bcbe-8f58-4e57-b89d-81039ce477c9.jpg" /></swiper-slide>
        <swiper-slide style="width: 1536px; margin-right: 30px;"><img src="http://resource.teemor.xyz/a9cd4813-c4cd-481c-87ea-8d55ed3dac73.jpg" /></swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="shopNav">
      <div class="slideall">

        <div class="long-title"><span class="all-goods">全部分类</span></div>
        <div class="nav-cont">
          <ul>
            <li class="index"><a href="/">首页</a></li>
            <li class="qc">
              <router-link :to="{name:'collect'}">我的收藏</router-link>
            </li>
            <li class="qc">
              <router-link :to="{name:'shopcart'}">购物车</router-link>
            </li>
            <li class="qc">
              <router-link :to="{name:'foot'}">足迹</router-link>
            </li>
          </ul>
        </div>

        <!--侧边导航 -->
        <div id="nav" class="navfull">
          <div class="area clearfix">
            <div class="category-content" id="guide_2">

              <div class="category">
                <ul class="category-list" id="js_climit_li">
                  <li class="appliance js_toggle relative first">
                    <div class="category-info">
                      <h3 class="category-name b-category-name" @click="toSearch('手机')"><i class="iconfont iconshouji1 font_1_5 font_red"></i><a class="ml-22">手机</a></h3>
                      <em>&gt;</em>
                    </div>
                    <b class="arrow"></b>
                  </li>
                  <li class="appliance js_toggle relative">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i class="iconfont icondiannao font_1_5 font_red"></i><a class="ml-22">电脑</a></h3>
                      <em>&gt;</em>
                    </div>
                    <b class="arrow"></b>
                  </li>
                  <li class="appliance js_toggle relative">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i class="iconfont iconyingyinerji font_1_5 font_red"></i><a class="ml-22">影音数码</a></h3>
                      <em>&gt;</em>
                    </div>
                    <b class="arrow"></b>
                  </li>
                  <li class="appliance js_toggle relative">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i class="iconfont iconfuzhuang font_1_5 font_red"></i><a class="ml-22">服装</a></h3>
                      <em>&gt;</em>
                    </div>
                    <b class="arrow"></b>
                  </li>
                  <li class="appliance js_toggle relative">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i class="iconfont iconriyongpin font_1_5 font_red"></i><a class="ml-22">日用品</a></h3>
                      <em>&gt;</em>
                    </div>
                    <b class="arrow"></b>
                  </li>
                  <li class="appliance js_toggle relative">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i class="iconfont iconyundong font_1_5 font_red"></i><a class="ml-22">运动健身</a></h3>
                      <em>&gt;</em>
                    </div>
                    <b class="arrow"></b>
                  </li>
                  <li class="appliance js_toggle relative">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i class="iconfont iconjiadian font_1_5 font_red"></i><a class="ml-22">电器</a></h3>
                      <em>&gt;</em>
                    </div>
                    <b class="arrow"></b>
                  </li>
                  <li class="appliance js_toggle relative">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i class="iconfont iconleqi font_1_5 font_red"></i><a class="ml-22">玩具/乐器</a></h3>
                      <em>&gt;</em>
                    </div>
                    <b class="arrow"></b>
                  </li>
                  <li class="appliance js_toggle relative">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i class="iconfont iconshuiguo font_1_5 font_red"></i><a class="ml-22">水果/零食</a></h3>
                      <em>&gt;</em>
                    </div>
                    <b class="arrow"></b>
                  </li>
                  <li class="appliance js_toggle relative last">
                    <div class="category-info">
                      <h3 class="category-name b-category-name"><i class="iconfont iconshuji font_1_5 font_red"></i><a class="ml-22" title="品牌、礼包">书籍/资料</a></h3>
                      <em>&gt;</em>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

          </div>
        </div>
        <!--轮播-->
        <div class="clear"></div>
      </div>
    </div>
    <div class="shopMainbg">
      <div class="shopMain" id="shopmain">
        <div class="clear "></div>

        <!--今日热门 start-->
        <div class="am-container ">
          <div class="shopTitle ">
            <h4>今日热门</h4>
            <span class="more ">
              <a class="more-link " href="# ">更多</a>
            </span>
          </div>
        </div>
        <div class="am-g am-g-fixed flood method3 ">
          <ul class="am-thumbnails ">
            <li v-for="item in itemList3">
              <div class="list ">
                <a @click="toItem(item.itemId)">
                  <img v-bind:src="item.mainImg" />
                  <div class="pro-title " style=" height:1rem; overflow:hidden; text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">{{item.itemName}}</div>
                  <span class="e-price ">￥{{item.sellingPrice}}</span>
                </a>
              </div>
            </li>
          </ul>

        </div>
        <!--今日热门 end-->

        <div class="clear "></div>

        <!--最新上架 start-->
        <div class="am-container ">
          <div class="shopTitle ">
            <h4>最新上架</h4>
            <span class="more ">
              <a class="more-link " href="# ">更多</a>
            </span>
          </div>
        </div>
        <div class="am-g am-g-fixed flood method3 ">
          <ul class="am-thumbnails ">
            <li v-for="item in itemList3">
              <div class="list ">
                <router-link :to="{name:'item',query:{itemId:item.id}}">
                  <img v-bind:src="item.mainImg" />
                  <div class="pro-title " style=" height:1rem; overflow:hidden; text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">{{item.itemName}}</div>
                  <span class="e-price ">￥{{item.sellingPrice}}</span>
                </router-link>
              </div>
            </li>
          </ul>

        </div>
        <!--最新上架 end-->
        <foot></foot>
        <!--引导 -->
        <div class="navCir">
          <li class="active"><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
          <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
          <li><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
          <li><a href="/src/person/index.html"><i class="am-icon-user"></i>我的</a></li>
        </div>
      </div>
    </div>
    <navfull></navfull>
    <common></common>
    <el-dialog title="请选择所属学校" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-cascader :options="schools" v-model="school" :show-all-levels="false" @change="schoolSelected"></el-cascader>
      </span>
      <span>
        <el-button @click="dialogVisible=false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import foot from '@/components/foot.vue'
import common from '@/components/common'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'home',
  components: {
    myheader,
    navfull,
    swiper,
    swiperSlide,
    foot,
    common,
  },
  data () {
    return {
      swiperOption: {
        loop: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        debugger: true,
        onTransitionStart (swiper) {
          console.log(swiper)
        }
      },
      itemList1: null,
      itemList2: [],
      itemList3: [],
      itemList4: [],
      schools: [],
      school: [],
      dialogVisible: false
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted () {
    this.swiper.slideTo(3, 1000, false);
    this.initHome();
  },
  methods: {
    initHome () {
      var schoolId = localStorage.getItem("schoolId");
      if (schoolId == undefined || schoolId == null || schoolId == "") {
        this.selectSchool();
        return;
      }
      this.axios.get("/item/initHome", {
        params: {
          schoolId: schoolId
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          var data = result.data;
          this.itemList1 = data.hot;
          this.itemList2 = data.hot;
          this.itemList3 = data.new;
        }
      })
    },
    searchItem () {
      var schoolId = localStorage.getItem("schoolId");
      if (schoolId == undefined || schoolId == null || schoolId == "") {
        this.selectSchool();
        return;
      }
      this.axios.get("/item/searchItemList", {
        params: {
          index: 1,
          pageSize: 10,
          schoolId: schoolId
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.itemList1 = result.data;
          this.itemList2 = result.data;
          this.itemList3 = result.data;
          this.itemList4 = result.data;
        }
      })
    },
    selectSchool () {
      this.dialogVisible = true;
      this.$http.get('static/universitys.json').then(res => {
        this.schools = res.body;
      })
    },
    schoolSelected () {
      this.dialogVisible = false;
      localStorage.setItem("schoolId", this.school[1]);
      this.searchItem();
    },
    toItem (itemId) {
      this.$router.push({
        name: "item",
        query: {
          itemId: itemId
        }
      })
    },
    toSearch (name) {
      this.$router.push({
        path: '/search',
        name: 'search',
        query: {
          ctgName: name
        }
      })
    },
  }
}
</script>
<style scoped>
@import "/src/AmazeUI-2.4.2/assets/css/admin.css";
@import "/src/AmazeUI-2.4.2/assets/css/amazeui.css";
@import "/src/assets/css/demo.css";
@import "/src/assets/css/optstyle.css";
@import "/src/assets/css/hmstyle.css";
@import "/src/assets/css/skin.css";
@import "/src/assets/css/common/commonFont.css";
@import "//at.alicdn.com/t/font_1085324_cymleny48ik.css";
</style>
